<template>
  <footer class="footer">
    <div class="footer-container">
      <!-- 左侧内容 -->
      <div class="footer-left">
        <div class="footer-links">
          <a href="#">关于我们</a>
          <a href="#">联系方式</a>
          <a href="#">加入我们</a>
          <a href="#">用户协议</a>
          <a href="#">隐私政策</a>
        </div>
        <div class="footer-info">
          <p>©2023 动漫视频站 版权所有</p>
          <p>备案号：京ICP备12345678号-1</p>
          <p>京公网安备 11010502034567号</p>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="footer-right">
        <div class="team-info">
          <h4>开发团队</h4>
          <p>前端开发：动漫前端组</p>
          <p>后端开发：动漫后端组</p>
          <p>UI设计：动漫设计组</p>
        </div>
        <div class="friend-links">
          <h4>友情链接</h4>
          <div class="links-container">
            <a href="https://www.bilibili.com" target="_blank">哔哩哔哩</a>
            <a href="https://www.acfun.cn" target="_blank">AcFun</a>
            <a href="https://www.iqiyi.com" target="_blank">爱奇艺</a>
            <a href="https://www.youku.com" target="_blank">优酷</a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>

</script>

<style scoped>
.footer {
  background-color: #333;
  color: #aaa;
  padding: 40px 0;
  margin-top: 50px;
}

.footer-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-left {
  flex: 1;
  min-width: 300px;
  margin-right: 30px;
}

.footer-right {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-links a {
  color: #aaa;
  margin-right: 20px;
  margin-bottom: 10px;
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover {
  color: white;
}

.footer-info {
  font-size: 12px;
  line-height: 1.6;
}

.team-info, .friend-links {
  flex: 1;
  min-width: 200px;
  margin-bottom: 20px;
}

.team-info h4, .friend-links h4 {
  color: #ddd;
  font-size: 16px;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #555;
}

.team-info p {
  font-size: 13px;
  margin-bottom: 8px;
  color: #bbb;
}

.links-container {
  display: flex;
  flex-wrap: wrap;
}

.friend-links a {
  color: #bbb;
  font-size: 13px;
  margin-right: 15px;
  margin-bottom: 10px;
  text-decoration: none;
}

.friend-links a:hover {
  color: white;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .footer-left, .footer-right {
    flex: 100%;
    margin-right: 0;
  }
}
</style>